<template>
    <div class="card content-box" :style="{ minHeight: clientHeight + 'px' }">
        <span class="text">复制指令哈哈哈哈哈哈</span>
        <div class="box-content">
        <el-input placeholder="请输入内容" v-model="data" style="width: 500px">
            <template #append>
                <el-button type="primary" v-copy="data">复制</el-button>
            </template>
        </el-input>
        </div>
    </div>
</template>

<script setup lang="ts" name="copyDirect">
import { reactive, ref } from "vue";
import copy from "@/utils/copy";

const directives = {
    copy
}
const clientHeight = document.body.clientHeight - 106
const data = ref < string >("哈哈哈哈哈哈")
</script>

<style scoped lang="scss">
.content-box{
    width: 100%;
}
::v-deep.el-input-group--append>.el-input__wrapper{
    height: 38px;
    margin-top: 1px;
}
::v-deep .el-input-group__append {
    box-shadow: 0 1px 0 0 #dcdfe6 inset,0 -1px 0 0 #dcdfe6 inset,-1px 0 0 0 #dcdfe6 inset;
}
</style>
